<template>
	<div>
		<div class="nav">
			<router-link
				to="/films/nowPlaying"
				class="navItem"
				active-class="navItemActive"
				>正在热映</router-link
			>
			<router-link
				to="/films/comingSoon"
				class="navItem"
				active-class="navItemActive"
				>即将上映</router-link
			>
		</div>
		<router-view></router-view>
	</div>
</template>

<script>
export default {}
</script>

<style scoped>
.nav {
	width: 100%;
	height: 49px;
	display: flex;
	color: #191a1b;
	font-size: 14px;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 999;
	background-color: #fff;
}
.navItem {
	width: 100%;
	height: 49px;
	text-align: center;
	line-height: 49px;
	/* margin: 0px 60px; */
	list-style-type: none;
}
.navItemActive {
	border-bottom: 2px solid #ff5f16;
	color: #ff5f16;
}
</style>
